<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>聊天消息内容管理列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/web/res/css/xadmin.css">
    <script src="/web/res/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/web/res/js/xadmin.js"></script>
</head>

<body>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a><cite>消息内容管理</cite></a>
        </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <!--<button class="layui-btn layui-btn-danger" onclick="delAll()">-->
                        <!--<i class="layui-icon layui-icon-delete"></i>批量删除-->
                    <!--</button>-->
                    <a class="layui-btn layui-btn-small lable-text-center" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>刷新表格数据</a>
                </div>

                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5" type="post"  action="/message/list">
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="发送人手机号" value="${(appMessage.fasongphone)!''}" name="fasongphone" >
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="发送人账号" value="${(appMessage.fasongcode)!''}" name="fasongcode" >
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="接收人手机号" value="${(appMessage.jieshouphone)!''}" name="jieshouphone" >
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="接收人账号" value="${(appMessage.jieshoucode)!''}" name="jieshoucode" >
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <select name="leixing">
                                <option value="">聊天类型</option>
                                <#list liaoTianLeiXingMap?keys as key>
                                <option value="${key!''}" <#if appMessage?exists && appMessage.leixing?exists><#if (appMessage.leixing)?number == key?number>selected</#if></#if>  > <@mapIntString map=liaoTianLeiXingMap key=key/></option>
                                </#list>
                            </select>
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <select name="xiaoxileixing">
                                <option value="">聊天内容类型</option>
                                <#list xiaoXiNeiRongLeiXingMap?keys as key>
                                <option value="${key!''}" <#if appMessage?exists && appMessage.xiaoxileixing?exists><#if (appMessage.xiaoxileixing)?number == key?number>selected</#if></#if>  > <@mapIntString map=xiaoXiNeiRongLeiXingMap key=key/></option>
                                </#list>
                            </select>
                        </div>

                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="开始时间" value="${(startdate)!''}" name="startdate" id="startdate">
                        </div>

                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="结束时间" value="${(enddate)!''}" name="enddate" id="enddate">
                        </div>

                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn"  lay-submit lay-filter="search" >
                                <i class="layui-icon">&#xe615;</i>搜索
                            </button>
                        </div>
                </form>
            </div>

    <div class="layui-card-body" style="overflow:auto">
        <table  class="layui-table layui-form tableH" lay-size="sm"  id="tab">
            <thead>
            <tr>
                <th style="width:10px;">
                    <input  type="checkbox" name="" lay-skin="primary" lay-filter="checkall">
                </th>
                <th style="width:70px;">发送人头像</th>
                <th style="width:70px;">发送人手机号</th>
                <th style="width:70px;">发送人账号</th>
                <th style="width:70px;">发送人昵称</th>
                <th style="width:70px;">接收人头像</th>
                <th style="width:70px;">接收人手机号</th>
                <th style="width:70px;">接收人账号</th>
                <th style="width:70px;">接收人昵称</th>
                <th style="width:40px;">消息类型</th>
                <th style="width:50px;">发送时间</th>
                <th style="width:50px;">内容类型</th>
                <th style="width:300px;">内容</th>

                <!--<th  style="width:70px;">操作</th>-->
            </tr>
            </thead>
            <tbody>
            <#list list as appMessage>
            <tr>
                <td class="check">
                    <input checkid type="checkbox" name="id" id="id" lay-skin="primary" value="${(appMessage.id?c)!''}">
                </td>
                <td><img src="${(appMessage.fasongtouxiang)!''}" title="${(appMessage.fasongtouxiang)!''}"  style="width:40px;height:40px;" class="img_big"/></td>
                <td>${appMessage.fasongphone!''}</td>
                <td>${appMessage.fasongcode!''}</td>
                <td>${appMessage.fasongnicheng!''}</td>
                <td><img src="${(appMessage.jieshoutouxiang)!''}" title="${(appMessage.jieshoutouxiang)!''}" style="width:40px;height:40px;" class="img_big"/></td>
                <td>${appMessage.jieshouphone!''}</td>
                <td>${appMessage.jieshoucode!''}</td>
                <td>${appMessage.jieshounicheng!''}</td>
                <td><@mapIntString map=liaoTianLeiXingMap key=appMessage.leixing/> </td>
                <td><#if appMessage.sendTime?exists>${(appMessage.sendTime?string("yyyy-MM-dd HH:mm:ss"))!}</#if></td>
                <td><@mapIntString map=xiaoXiNeiRongLeiXingMap key=appMessage.xiaoxileixing/></td>
                <td>
                    <#if appMessage.xiaoxileixing?exists && appMessage.xiaoxileixing = 1>
                    ${(appMessage.message)!''}
                    <#elseif appMessage.xiaoxileixing?exists && appMessage.xiaoxileixing = 2>
                    ${(appMessage.message)!''}
                    <#elseif appMessage.xiaoxileixing?exists && appMessage.xiaoxileixing = 3>
                    <img src="${(appMessage.message)!''}" title="${(appMessage.message)!''}" style="width:35px;height:35px;" class="img_big"/>
                    <#elseif appMessage.xiaoxileixing?exists && appMessage.xiaoxileixing = 4>
                    <video src="${(appMessage.message)!''}" width="50" height="50" controls="controls">
                        您的浏览器不支持播放
                    </video>
                    <#elseif appMessage.xiaoxileixing?exists && appMessage.xiaoxileixing = 5>
                    <a hef="${(appMessage.message)!''}">${(appMessage.message)!''}</a>
                    <#elseif appMessage.xiaoxileixing?exists && appMessage.xiaoxileixing = 6>
                    <audio controls="controls">
                        <source src="${(appMessage.message)!''}" type="audio/mpeg">
                        您的浏览器不支持播放
                    </audio>
                    <#elseif appMessage.xiaoxileixing?exists && appMessage.xiaoxileixing = 7>
                    <font color="red">【红包】</font>
                    <#elseif appMessage.xiaoxileixing?exists && appMessage.xiaoxileixing = 8>
                    <font color="red">【转账】</font>
                </#if>

                 </td>
                <!--<td class="td-manage btn-center">-->
                    <!--<button class="layui-btn layui-btn-xs layui-btn-warm" onclick="xadmin.open('编辑','/message/detail?id=${(appMessage.id?c)!''}',800,600)" >-->
                        <!--<i class="layui-icon layui-icon-edit"></i>编辑-->
                    <!--</button>-->

                    <!--<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del(this,'${(appMessage.id?c)!''}')">-->
                        <!--<i class="layui-icon layui-icon-delete"></i>删除-->
                    <!--</button>-->
                <!--</td>-->
            </tr>
            </#list>
            </tbody>
        </table>
    </div>
    <!-- 分页条 -->
    <div id="pager" style="text-align: center;"></div>
</div>
</div>
</div>
</div>
</body>

<script>
    layui.use(['laydate', 'form', 'table'], function () {
        let $ = layui.$;
        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;


        // 监听全选
        form.on('checkbox(checkall)', function (data) {
            if (data.elem.checked) {
                $('.check input').prop('checked', true);
            } else {
                $('.check input').prop('checked', false);
            }
            form.render('checkbox');
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#startdate' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#enddate' //指定元素
        });

        //放大图片
        $(".img_big").click(function(){
            var url = $(this).attr('title');
            $("#displayImg").attr("src", url);
            var height = $("#displayImg").height();
            var width = $("#displayImg").width();
            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,//隐藏关闭按钮
                shade: [0.5, '#000'],//黑色背景（0.3代表颜色深度）
                shadeClose: true,//点击遮罩关闭大图
                area: [width + 'px', height + 'px'], //宽高
                resize:false,//不可拖拽缩放
                content: "<img alt=" + name + " title=" + name + " src=" + url + " height=500px; width=500px;" + "/>"
            });
        })

    });

    // 删除
    function del(obj, id) {
        layui.use('layer',function () {
            let $ = layui.$;
            layer.confirm('确认要删除吗？', function (index) {
                ajaxPost($,"/message/del",{"idArray":id},function (data) {
                    if (data.code == 0) {
                        layer.msg(data.msg, {icon: 1, time: 1000}, function(){
                            location.reload();
                        });
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 1000}, function(){
                        });
                    }
                });
            });
        });
    }

    function delAll(argument) {
        var ids = [];
        // 获取选中的id
        $('tbody input[checkid]').each(function (index, el) {
            if ($(this).prop('checked')) {
                ids.push($(this).val())
            }
        });
        var idArray = ids.toString();
        if(idArray.length == 0){
            layer.msg('请选择！', {icon: 2, time: 1000}, function(){});
            return false;
        }
        layui.use('layer',function () {
            let $ = layui.$;
            layer.confirm('确认要删除吗？', function (index) {
                $.ajax({
                    type: "POST",
                    url: "/message/del",
                    dataType: "json",
                    cache: false,
                    async: false,
                    data: {
                        "idArray":idArray
                    },
                    success: function (data) {
                        if (data.code == 0) {
                            layer.msg(data.msg, {icon: 1, time: 1000}, function(){
                                location.reload();
                            });
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 1000}, function(){
                            });
                        }
                    }
                });
            });
        });
    }
</script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['laypage', 'layer', 'form'], function(){
        let $ = layui.$;
        var laypage = layui.laypage
            ,form = layui.form
            ,layer = layui.layer;

        laypage.render({
            elem: 'pager'
            ,count: ${(splitPage.totalCount?c)!''}
            ,limit: ${(splitPage.pageSize?c)!''}
            ,curr: ${(splitPage.pageIndex?c)!''}
            ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            ,jump: function(obj, first){
                //首次不执行
                if(!first){
                    var myform = document.forms[0];
                    // alert("formName:"+myform.id);
                    var pageIndex = document.createElement("input");
                    pageIndex.name="pageIndex";
                    pageIndex.type="hidden";
                    pageIndex.value=obj.curr;
                    myform.appendChild(pageIndex);

                    var pageSize = document.createElement("input");
                    pageSize.name="pageSize";
                    pageSize.type="hidden";
                    pageSize.value=obj.limit;
                    myform.appendChild(pageSize);
                    // myform.submit();

                    // $("button[lay-filter]")
                    // form.on('submit(button[lay-filter])', function(data){
                    //     // layer.msg(JSON.stringify(data.field));
                    //     // return false;
                    // });
                    // var submitBtn = $("button[lay-submit]");
                    // alert(submitBtn);
                    // console.log(submitBtn)
                    // layer.msg(JSON.stringify(submitBtn));

                    // $('[lay-filter="search"]').click();
                    // $('#chaxun').click();
                    $("button[lay-submit]:eq(0)").click();
                    // $("button[lay-submit]")[0].click();
                    // alert($("#formsubmit").attr("action")+"_获取数量："+obj.limit+"_页码数："+obj.curr);
                    // console.log(obj)
                }
            }
        });
    });
</script>


</html>